<template>
  <div class="login">
    <div class="login-form">
      <div class="login-header">
        <img src="../../assets/images/logo.svg" width="100" height="100" alt>
        <p>{{ $Config.siteName }}</p>
      </div>
      <el-input
        placeholder="请输入用户名"
        suffix-icon="fa fa-user"
        v-model="userNmae"
        style="margin-bottom: 18px"
      ></el-input>

      <el-input
        placeholder="请输入密码"
        suffix-icon="fa fa-keyboard-o"
        v-model="password"
        type="password"
        style="margin-bottom: 18px"
        @keyup.native.enter="login"
      ></el-input>

      <el-button
        type="primary"
        :loading="loginLoading"
        style="width: 100%;margin-bottom: 18px"
        @click.native="login"
      >登录</el-button>
      <div>
        <el-checkbox v-model="Remenber">Remenber</el-checkbox>
        <a href="javascript:;" style="float: right;color: #3C8DBC;font-size: 14px">Register</a>
      </div>
    </div>
  </div>
</template>

<script>
import { setToken } from "../../utils/dataStorage";
import { login as loginApi } from "../../api/user";
import { repairList as repair } from "../../api/repair";
import { setUserInfo } from "../../utils/dataStorage.js";

export default {
  data() {
    return {
      userNmae: '',
      password: '',
      Remenber: true,
      loginLoading: false,
      user: ''
    };
  },
  methods: {
    login() {
      this.loginLoading = true;
      //【注意】必须使用这种方式传递参数，否则后台参数无法接收到
      // 具体原因请看https://blog.csdn.net/csdn_yudong/article/details/79668655
      let param = new URLSearchParams();
      param.append("userName", this.userNmae);
      param.append("password", this.password);
      // 执行登录方法
      loginApi(param)
        .then(r => {
          // console.log(r)
          if (r == "") {
            console.log("登录失败");
            this.user = "没有数据";
            setTimeout(() => {
              this.$notify({
                title: "登录失败",
                message: "Sorry，用户名或密码错误",
                type: "fail"
              });
              this.loginLoading = false;
            }, 1000);
          } else {
            setTimeout(() => {
              setToken("123456789"); 
              setUserInfo(r);
              console.log(r)
              this.$notify({
                title: "登录成功",
                message: "很高兴你使用ElementUIAdmin！",
                type: "success"
              });
              this.loginLoading = false;
              this.$router.push({ path: "/" });
           //   }, 1000);
           },);         
          }
        })
        .catch(_ => {
          console.log(_);
        });
    }
  }
};
</script>

<style lang="scss">
@import "Login.scss";
</style>
